<template>
  <div class="content">
    <div v-if="!isDetail">
      <div class="filter">
        <div class="flex-center mb50">
          <el-input v-model="filter.keywords" placeholder="搜索职位/公司"></el-input>
          <el-button type="primary" @click="search">查询</el-button>
        </div>
        <div class="flex-center mt20">
          <div class="label">城市：</div>
          <el-checkbox-group v-model="filter.jobLocation" @change="search">
            <el-checkbox
              :label="item"
              v-for="(item, index) in jobLocations"
              :key="index"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="flex-center mt20">
          <div class="label">薪资：</div>
          <el-radio-group v-model="filter.salary" @change="search">
            <el-radio
              :label="item"
              v-for="(item, index) in jobSalarys"
              :key="index"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </div>
        <div class="flex-center mt20">
          <div class="label">学历：</div>
          <el-radio-group v-model="filter.xueli" @change="search">
            <el-radio
              :label="item"
              v-for="(item, index) in xuelis"
              :key="index"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </div>
        <div class="flex-center mt20">
          <div class="label">工作经验：</div>
          <el-radio-group v-model="filter.experience" @change="search">
            <el-radio
              :label="item"
              v-for="(item, index) in jobExperiences"
              :key="index"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>

      <div class="content2" v-loading="loading">
        <div
          class="each-job"
          v-for="(item, index) in tableDataFilter"
          :key="index"
          @click="toDetail(item)"
        >
          <div class="left">
            <div>
              <span class="job-name">{{ item.jobName }}</span>
              <span class="salary">{{ item.salary }}</span>
            </div>
            <div class="default">
              <span>{{ item.jobLocation }}</span>
              <span>{{ item.experience }}</span>
              <span>{{ item.xueli }}</span>
            </div>
            <div class="comName">
              <span>{{ item.publisherInfo.companyName }}</span>
              <span v-for="tag in item.tags">{{tag}}</span>
            </div>
          </div>
          <div class="right">
            <img :src="item.publisherInfo.avator" alt="" />
            <div class="name">{{ item.publisherInfo.username }}</div>
            <div class="jobName">{{ item.publisherInfo.jobName }}</div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageNum"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="isDetail" class="detail">
      <img @click="openReport" title="举报" style="width: 30px;position: absolute;right: 150px;top: 25px;cursor: pointer;" src="../assets/images/举报.svg" alt="">
      <el-button v-if="!isTD" class="btn" type="primary" @click="td"
        >投递简历</el-button
      >
      <el-button v-if="isTD" class="btn" type="danger">已投递</el-button>
      <div class="back" @click="isDetail = false" style="cursor: pointer;">
        <img src="../assets/images/back.svg" alt="" style="width: 18px" />
        <div>返回</div>
      </div>
      <div class="flex-center">
        <div class="job-name">{{ detail.jobName }}</div>
        <div class="salary">{{ detail.salary }}</div>
      </div>
      <div class="flex-center">
        <div class="default">{{ detail.jobLocation }}</div>
        <div class="default">{{ detail.experience }}</div>
        <div class="default">{{ detail.xueli }}</div>
      </div>
      <div class="flex-center">
        <div class="default" v-for="(tag, index) in detail.tags" :key="index">
          {{ tag }}
        </div>
      </div>

      <div class="flex-center">
        <img :src="detail.publisherInfo.avator" alt="" class="avator" />
        <div>
          <div class="user-name">{{ detail.publisherInfo.username }}</div>
          <div class="default">
            {{ detail.publisherInfo.jobName }}
            <span class="ml10">{{ detail.publisherInfo.companyName }}</span>
          </div>
        </div>
      </div>

      <h2 v-if="detail.companyPics" class="mt20">公司环境</h2>
      <el-carousel v-if="detail.companyPics" indicator-position="outside" class="swipe">
        <el-carousel-item v-for="item in detail.companyPics" :key="item">
          <img :src="item"> 
        </el-carousel-item>
      </el-carousel>

      <h2>职位介绍</h2>
      <div class="desc">
        {{ detail.jobDesc }}
      </div>

      <h2 class="mt20">其他信息</h2>
      <div class="other">
        {{ detail.other }}
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input v-model="report" placeholder="请输入举报内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserInfo,
  getXuelis,
  getJob,
  updateUser,
  updateJob,
  getJobSalary,
  getJobTags,
  getJobExperience,
  getJobLocation,
  getJobTypes,
  addReport
} from "../service.js";
export default {
  name: "YHome",
  data() {
    return {
      tableData: [],
      tableDataFilter: [],
      pageNum: 1,
      pageSize: 10,
      report: '',
      total: 0,
      isDetail: false,
      funList: [],
      jobSalarys: [],
      jobTags: [],
      jobExperiences: [],
      jobLocations: [],
      jobTypes: [],
      xuelis: [],
      dialogVisible: false,
      filter: {
        jobLocation: ["全国"],
        salary: "全部",
        keywords: '',
        xueli: '全部',
        experience: '全部'
      },
      isTD: false,
      userInfo: {},
      loading: false
    };
  },
  beforeCreate() {
    getJobSalary().then((res) => {
      this.jobSalarys = res.code === 200 ? ['全部'].concat(res.data) : [];
    });
    getJobTags().then((res) => {
      this.jobTags = res.code === 200 ? res.data : [];
    });
    getJobExperience().then((res) => {
      this.jobExperiences = res.code === 200 ? ['全部'].concat(res.data) : [];
    });
    getJobLocation().then((res) => {
      this.jobLocations = res.code === 200 ? res.data : [];
    });
    getJobTypes().then((res) => {
      this.jobTypes = res.code === 200 ? ['全部'].concat(res.data) : [];
    });
    getXuelis().then((res) => {
      this.xuelis = res.code === 200 ? ['全部'].concat(res.data) : [];
    });
  },
  mounted() {
    this.refreshTable();
    if (localStorage.getItem("meiyaWebInfo")) {
      this.userInfo = JSON.parse(localStorage.getItem("meiyaWebInfo"));
      getUserInfo(this.userInfo._id).then((res) => {
        this.userInfo = res.data;
      });
    }
    if (this.$route.params.jobName) {
      this.toDetail(this.$route.params)
    }
  },
  methods: {
    search() {
      if (this.filter.jobLocation.length > 1 && this.filter.jobLocation.includes('全国')) {
        let index = this.filter.jobLocation.findIndex(v => v === '全国')
        if (index !== this.filter.jobLocation.length - 1) {
          this.filter.jobLocation.splice(index, 1)
        } else {
          this.filter.jobLocation = ['全国']
        }
      }
      this.refreshTable();
    },
    refreshTable() {
      this.loading = true
      getJob().then(async (res) => {
        this.tableData = res.code === 200 ? res.data.filter((v) => v.examine === "true") : [];
        for (let item of this.tableData) {
          item.tags = JSON.parse(item.tags);
          if (item.companyPics) {
            item.companyPics = JSON.parse(item.companyPics)
          }
          if (item.publisherId) {
            let user = await getUserInfo(item.publisherId);
            item.publisherInfo = user.data;
          }
        }
        if (this.filter.keywords) {
          this.tableData = this.tableData.filter(v => v.jobName.includes(this.filter.keywords) || v.publisherInfo.companyName.includes(this.filter.keywords))
        }
        if (this.filter.salary && this.filter.salary !== '全部') {
          this.tableData = this.tableData.filter(v => v.salary === this.filter.salary)
        }
        if (this.filter.xueli && this.filter.xueli !== '全部') {
          this.tableData = this.tableData.filter(v => v.xueli === this.filter.xueli)
        }
        if (this.filter.experience && this.filter.experience !== '全部') {
          this.tableData = this.tableData.filter(v => v.experience === this.filter.experience)
        }
        if (this.filter.jobLocation && !this.filter.jobLocation.includes('全国')) {
          this.tableData = this.tableData.filter(v => this.filter.jobLocation.includes(v.jobLocation))
        }
        this.total = this.tableData.length;
        this.naviData();
        this.loading = false
      });
    },
    naviData() {
      this.tableDataFilter = this.tableData.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageSize * this.pageNum
      );
    },
    handleCurrentChange(index) {
      this.pageNum = index;
      this.naviData();
    },
    toDetail(item) {
      this.isTD = false;
      this.isDetail = true;
      if (item.companyPics && typeof item.companyPics === 'string') {
        item.companyPics = JSON.parse(item.companyPics)
      }
      this.detail = item;
      console.log(this.detail)
      if (this.detail.toudiIds) {
        let toudiIds = JSON.parse(this.detail.toudiIds);
        if (toudiIds.includes(this.userInfo._id)) {
          this.isTD = true;
        }
      } else {
        this.detail.toudiIds = [];
      }
    },
    td() {
      if (!this.userInfo.username) {
        this.$message.error('请先登录')
        return
      }
      if (!this.userInfo.xueli) {
        this.$message.error('请先完善您的个人简历')
        return
      }
      if (typeof this.detail.toudiIds === 'string') {
        this.detail.toudiIds = JSON.parse(this.detail.toudiIds)
      }
      let toudiIds = this.detail.toudiIds || []
      if (!toudiIds.includes(this.userInfo._id)) {
        toudiIds.push(this.userInfo._id);
      }
      // 给个人信息myTdIds + 值
      let myTdIds = this.userInfo.myTdIds
        ? JSON.parse(this.userInfo.myTdIds)
        : [];
      if (!myTdIds.includes(this.detail._id)) {
        myTdIds.push({
          ...this.detail,
          examine: ''
        });
      }
      updateUser(this.userInfo._id, {
        myTdIds: JSON.stringify(myTdIds),
      }).then((res) => {
        updateJob(this.detail._id, {
          toudiIds: JSON.stringify(toudiIds),
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("投递成功，请等待回复");
            // 重新刷新tableDataFilter
            this.isTD = true;
            getUserInfo(this.userInfo._id).then((res) => {
              this.userInfo = res.data;
            });
            this.refreshTable()
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    openReport() {
      if (!this.userInfo.username) {
        this.$message.error('请先登录')
        return
      }
      this.dialogVisible = true
      this.report = ''
    },
    handleClose() {
      this.dialogVisible = false
    },
    submit() {
      if (!this.report) {
        this.$message.error('请输入举报内容')
        return
      }
      addReport({
        content: this.report,
        userId: this.userInfo._id,
        jobId: this.detail._id
      }).then(res => {
        this.$message.success('举报成功，待管理员审核')
        this.dialogVisible = false
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.mb50 {
  margin-bottom: 50px;
}
.mt20 {
  margin-top: 20px;
}
.content {
  width: 1200px;
  min-height: 60vh;
  margin: 30px auto;
}
.flex-center {
  display: flex;
  align-items: center;
  gap: 20px;
  .label {
    font-weight: bold;
    font-size: 14px;
  }
}
.pagination {
  text-align: center;
  margin-top: 30px;
}
.each-job {
  width: 1200px;
  margin: 20px auto;
  display: flex;
  padding-bottom: 20px;
  align-items: center;
  border-bottom: 1px solid lightgray;

  .left {
    flex: 3;
    .job-name {
      font-weight: bold;
      font-size: 20px;
    }
    .salary {
      font-weight: bold;
      font-size: 20px;
      color: orange;
      margin-left: 20px;
    }
    .default {
      margin-top: 10px;
      color: #999;
      span {
        margin-right: 10px;
      }
    }
    .comName {
      font-weight: bold;
      margin-top: 10px;
      span {
        margin-right: 10px;
      }
    }
  }
  .right {
    width: 50px;
    text-align: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    display: flex;
    flex-direction: column;
    gap: 10px;
    .name {
      color: #333;
      font-size: 14px;
      font-weight: bold;
    }
    .jobName {
      color: #999;
    }
  }
}
.detail {
  position: relative;
}
.back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
}
.detail {
  padding: 20px;
  position: relative;
  .btn {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .back {
    position: absolute;
    left: 0px;
    top: -20px;
  }
  .job-name {
    font-weight: bold;
    font-size: 24px;
  }
  .salary {
    font-weight: bold;
    font-size: 24px;
    color: orange;
  }
  .flex-center {
    margin-bottom: 40px;

    .default {
      margin-right: 20px;
      color: #333;
    }
  }
  .avator {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .user-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
  }
  .desc {
    margin-top: 30px;
  }
  .other {
    margin-top: 30px;
  }
}
.ml10 {
  margin-left: 10px;
}
.mt20 {
  margin-top: 20px;
}
.swipe {
  img {
    height: 400px;
    width: 100%;
  }
}
</style>
